<template>
  <view>
    <u-sticky>
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="activeIndex"
        name="value"
        @change="changeTabItem"
      ></u-tabs>
    </u-sticky>

    <view class="index_warp">
      <view
        class="item"
        type="course"
        v-for="item in showList"
        :key="item.id"
        @click="clickItem(item)"
      >
        <template v-if="activeIndex === 2">
          <view class="name">
            {{ item.sectionName }}
          </view>
          <view class="recently flex_b">
            <view class="step flex">
              答题进度
              <view class="silder">
                <u-slider
                  v-model="item.schedule"
                  disabled
                  inactive-color="#ccc"
                  active-color="#0079ba"
                  height="12"
                  :max="item.questionNum"
                ></u-slider>
              </view>
              {{ item.schedule }} /{{ item.questionNum }}
            </view>
            <view class="btn"> 继续答题 </view>
          </view>
        </template>
        <template v-else>
          <view class="flex_b">
            <view class="name">{{ item.sectionName }}</view>
            <view class="right flex">
              <view class="num">{{ item.questionNum }}</view>
              <view class="iconfont icon-angle-right"></view>
            </view>
          </view>
        </template>
      </view>
      <load-more :status="status" />
    </view>
  </view>
</template>

<script>
import { questionTypeList } from "@/api/course";
import { exerciseList } from "@/config/list";
export default {
  data() {
    return {
      status: "loadmore",
      tabList: exerciseList,
      activeIndex: 0,
      pageNum: [1, 1, 1],
      pageSize: 20,
      list: [],
    };
  },
  onLoad() {
    const obj = {
      list: [],
      total: 0,
    };
    this.tabList.forEach((v, i) => {
      this.list[i] = obj;
    });
    this.getList();
  },
  onReachBottom() {
    this.$u.throttle(this.getList(), 1000, true);
  },
  methods: {
    clickItem(item) {
      const { activeIndex } = this;
      let params = {};
      if (activeIndex === 2) {
        params = {
          coursePackageId: item.coursePackageId,
          id: item.id,
        };
      } else {
        params = {
          courseQuestionSectionId: item.courseQuestionSectionId,
          questionType: activeIndex + 1,
        };
      }
      this.$u.route("/pages/exercises/exercises", {
        item: JSON.stringify(item),
        ...params,
      });
    },
    getList() {
      if (this.status == "nomore") return;
      const activeIndex = this.activeIndex;
      if (
        (this.pageSize * (this.pageNum[activeIndex] - 1) >
          this.list[activeIndex] &&
          this.list[activeIndex].total) ||
        0
      ) {
        this.status = "nomore";
      }
      this.status = "loading";
      questionTypeList({
        pageNum: this.pageNum[activeIndex],
        pageSize: this.pageSize,
        playType: this.playType,
      }).then((res) => {
        this.pageNum[activeIndex] = this.pageNum[activeIndex] + 1;
        let obj = {};
        obj.list = [
          ...((this.list[activeIndex] && this.list[activeIndex].list) || []),
          ...res.list,
        ];
        obj.total = res.total;
        this.showList = obj;
        if (res.list.length < this.pageSize) {
          this.status = "nomore";
        }
      });
    },
    changeTabItem(e) {
      this.activeIndex = e;
      this.status = "loadmore";
      this.getList();
    },
  },
  computed: {
    showList: {
      get() {
        return this.list[this.activeIndex].list;
      },
      set(obj) {
        this.$set(this.list, this.activeIndex, obj);
      },
    },
    playType: function () {
      return this.activeIndex + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp {
  padding: 30upx;

  .item {
    margin-bottom: 30upx;
    padding: 30upx;
    background: #fff;
    border-radius: 15upx;

    .name {
      font-size: 32upx;
      font-weight: 700;
    }

    .right {
      .num {
        font-size: 32upx;
        font-weight: 700;
        margin-right: 10upx;
        color: #0079ba;
      }
    }
    .recently {
      .step {
        .silder {
          width: 200upx;
          margin: 0 20upx;
        }
      }
      .btn {
        padding: 20upx 30upx;
        background-color: #0079ba;
        color: #fff;
        font-size: 28upx;
        font-weight: 600;
        border-radius: 20upx;
      }
    }
  }
}
</style>
